<template>
	<div>
		<div class="page has-navbar has-tabbar" v-tabbar-menu-index="1">
			<von-header theme="light">
				<span slot="title">买车</span>
			</von-header>
			<div class="page-content padding-top">
				<scroller class="page-content cars-box" :on-refresh="onRefresh" :on-infinite="onInfinite" ref="scroller">
					<div class="filter-box weui-flex">
						<div class="weui-flex-item" @click="sort">{{sortJson.sortTitle || '默认排序'}}</div>
						
						<div class="weui-flex-item" @click="filterBrand">{{((brandJson.brandName || '')+(brandJson.seriesName || '')+(brandJson.modelName || '')) || '品牌'}}</div>
						<!--<div class="weui-flex-item" @click="shopStateShow=true">{{'状态'}}</div>-->
						<div class="weui-flex-item" @click="filterPrice">{{priceJson.title || '价格'}}</div>
						<div class="weui-flex-item" @click="filterMarket">{{marketJson.marketName || '市场'}}</div>
						<div class="weui-flex-item" @click="shopScreen=true">{{'筛选'}}</div>
					</div>
					<car-options :carsList="carsList" ></car-options>
				</scroller>
			</div>
		</div>
		<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
			<keep-alive>
				<screen-modal v-if="shopScreen" @cancel="cancel"></screen-modal>
			</keep-alive>
		</transition>
		<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
			<keep-alive>
				<screen-price v-if="showPrice" @cancel="cancel2"></screen-price>
			</keep-alive>
		</transition>
		<!--<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
			<keep-alive>
				<screen-state v-if="shopStateShow" :params="carStateJson" @cancel="cancel3"></screen-state>
			</keep-alive>
		</transition>-->

	</div>
</template>
<script>
	import screenState from 'src/assembly/screenState.vue'
	import screenModal from 'src/assembly/screenRange2.vue'
	import screenPrice from 'src/assembly/screenPrice.vue'
	import sortModal from '../sort/sort_buy.vue'
	import brandModal from '../sort/brand.vue'
	import priceModal from '../sort/price.vue'
	import filterModal from '../sort/filter.vue'
	import marketModal from '../sort/market.vue'
	import { bus } from 'bus.js'
	export default {
		data() {
			return {
				carsList: [],
				pageNo: 0,
				pageNo2: 0,
				pageSize: 10,
				imgUrl: imgUrl,
				brandJson: {},
				sortJson: {
					sortName: 'CAR_SALE_TIME',
					sortMode: 'DESC',
					sortTitle: '最新上架',
				},
				priceJson: {},
				marketJson: {},
				brandModal: null,
				shopScreen: false,
				rangeJson: {
					vage: {},
					mileage: {},
					oage: {},
				},
				showPrice: false,
				shopStateShow: false,
				shopState:{},
				carStateJson:{},
				carPosition: {}
			}
		},
		components: {
			screenModal,
			screenPrice,
			screenState
		},
		beforeDestroy(){
			let obj = {
				pageNo: this.pageNo,
				scrollerTop: this.$refs['scroller'].getPosition().top
			}
			sess.set('carObj', {
				carPosition: obj,
				brandJson: this.brandJson,
				sortJson: this.sortJson,
				priceJson: this.priceJson,
				rangeJson: this.rangeJson,
				shopState: this.shopState,
				marketJson: this.marketJson
			})
		},
		mounted() {
			$modal.fromComponent(sortModal, {
				title: '排序',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.sortModal = modal;
			});

			$modal.fromComponent(brandModal, {
				title: '选择品牌',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.brandModal = modal;
			});

			$modal.fromComponent(priceModal, {
				title: '价格',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.priceModal = modal;
			});

			$modal.fromComponent(filterModal, {
				title: '筛选',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.filterModal = modal;
			});

			$modal.fromComponent(marketModal, {
				title: '市场',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.marketModal = modal;
			});

		},
		created() {		
			
			
			bus.$on('brandJson', (obj) => {
				this.brandJson = obj
				this.brandModal.hide();
				bus.$emit('hideAll');
				this.onRefresh();
			})
			bus.$off('sortJson')
			bus.$on('sortJson', (obj) => {
				this.sortJson = obj;
				this.sortModal.hide();
				this.onRefresh();
			})
			bus.$on('priceJson', (obj) => {
				this.priceJson = obj;
				this.priceModal.hide();
				this.onRefresh();
			})
			bus.$on('marketJson', (obj) => {
				// console.log(obj);
				this.marketJson = obj;
				this.marketModal.hide();
				this.onRefresh();
			})
		},
		destroyed() {
			if(this.sortModal)
				$modal.destroy(this.sortModal)
			if(this.brandModal)
				$modal.destroy(this.brandModal)
			if(this.priceModal)
				$modal.destroy(this.priceModal)
			if(this.filterModal)
				$modal.destroy(this.filterModal)
			if(this.marketModal)
				$modal.destroy(this.marketModal)
		},
		methods: {
			cancel(val) {
				this.shopScreen = false
				if(val) {
					this.getParams(val)
				}
			},
			cancel2(val) {
				this.showPrice = false
				if(val) {
					this.priceJson.start = val.min
					this.priceJson.end = val.max
					this.onRefresh();
				}
			},
			cancel3(val) {
				this.shopStateShow = false
				if(val) {
					this.shopState = val
					this.onRefresh();
				}
			},
			sort() {
				this.sortModal.show();
			},
			filterBrand() {
				this.brandModal.show();
			},
			filterPrice() {
				this.showPrice = true
				//			this.priceModal.show();
			},
			filterBox() {
				this.filterModal.show();
			},
			filterMarket() {
				this.marketModal.show();
			},
			getParams(obj) {
				this.rangeJson = obj;
				this.onRefresh();
			},
			onRefresh() {
				var _this = this;
				this.pageNo = 1;
				axios.get(baseUrl + '/controller/getCarList', {
						params: {
							pageIndex: 1,
							pageSize: 10,
							marketId: this.marketJson.marketId || 1,
							brandId: this.brandJson.brandId,
							seriesId: this.brandJson.seriesId,
							modelId: this.brandJson.modelId,
							orderColunm: this.sortJson.sortName,
							orderMode: this.sortJson.sortMode,
							fromRetailPrice: this.priceJson.start,
							toRetailPrice: this.priceJson.end,
							carSaleState: 20,
							fromCarAge: this.rangeJson.vage.min,
							toCarAge: this.rangeJson.vage.max,
							fromMileage: this.rangeJson.mileage.min,
							toMileage: this.rangeJson.mileage.max,
							fromCreateTime: this.rangeJson.oage.min,
							toCreateTime: this.rangeJson.oage.max,
							carOutColor: this.rangeJson.color,
							carTypeId: this.rangeJson.type,
							carEnviron: this.rangeJson.carEnviron,
							carOrderState:this.shopState.carOrderState,
							carDetectState:this.shopState.carDetectState,
							carBargainPriceState:this.shopState.carBargainPriceState,
							carPledgeState:this.shopState.carPledgeState,
						}
					})
					.then(function(res) {
						var resArr = res.data.result;
						if(resArr.length == 0) {
							_this.$refs.scroller.finishPullToRefresh(true);
							_this.carsList = resArr;
							return;
						}
						_this.carsList = resArr;
						setTimeout(() => {
							if(_this.$refs.scroller)
								_this.$refs.scroller.finishPullToRefresh()
						})
					})
			},

			onInfinite() {
				var _this = this;
				if (this.pageNo === 0 && this.$store.state.carObjState && typeof sess.get('carObj') == typeof {}) {
					this.$store.commit('carObjStateChange', false)
					let carObj = sess.get('carObj')
					sess.remove('carObj')
					this.brandJson = carObj.brandJson
					this.sortJson = carObj.sortJson
					this.priceJson = carObj.priceJson
					this.marketJson = carObj.marketJson
					this.shopState = carObj.shopState
					this.carPosition = carObj.carPosition
					this.carPosition = carObj.carPosition
					this.pageSize = this.carPosition.pageNo * 10
					this.pageNo = 1
					this.pageNo2 = this.carPosition.pageNo
				} else {
					this.pageSize = 10
					this.pageNo += 1
				}
				
				axios.get(baseUrl + '/controller/getCarList', {
					params: {
						pageIndex: this.pageNo,
						pageSize: this.pageSize,
						marketId: this.marketJson.marketId || 1,
						brandId: this.brandJson.brandId,
						seriesId: this.brandJson.seriesId,
						modelId: this.brandJson.modelId,
						orderColunm: this.sortJson.sortName,
						orderMode: this.sortJson.sortMode,
						fromRetailPrice: this.priceJson.start,
						toRetailPrice: this.priceJson.end,
						carSaleState: 20,
						fromCarAge: this.rangeJson.vage.min,
						toCarAge: this.rangeJson.vage.max,
						fromMileage: this.rangeJson.mileage.min,
						toMileage: this.rangeJson.mileage.max,
						fromCreateTime: this.rangeJson.oage.min,
						toCreateTime: this.rangeJson.oage.max,
						carOutColor: this.rangeJson.color,
						carTypeId: this.rangeJson.type,
						carEnviron: this.rangeJson.carEnviron,
						carOrderState:this.shopState.carOrderState,
						carDetectState:this.shopState.carDetectState,
						carBargainPriceState:this.shopState.carBargainPriceState,
						carPledgeState:this.shopState.carPledgeState,
					}
				})
				.then(function(res) {
					var resArr = res.data.result;
					if (_this.pageNo2>0) {
						_this.pageNo = _this.pageNo2
						_this.pageNo2 = 0
					}
					if(resArr.length == 0) {
						_this.$refs.scroller.finishInfinite(true);
						return;
					}
					for(var i = 0; i < resArr.length; i++) {
						_this.carsList.push(resArr[i])
					}
					setTimeout(() => {
						if(_this.$refs.scroller)
							_this.$refs.scroller.finishInfinite()
					},0)
					if (_this.carPosition.scrollerTop) {
						setTimeout(() => {
							_this.$refs['scroller'].scrollBy(0, _this.carPosition.scrollerTop, false)
							_this.carPosition = {}
						},20)
					}
					

				})
			},

		}
	}
</script>
<style scoped>
	.filter-box {
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #fff;
	}
	
	.filter-box div {
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.animated {
		transition: all .3s ease;
		-webkit-transition: all .3s ease;
	}
</style>